// 

/**
 * 
 * 问题详情
 * 
 * */

import React, { useCallback, useMemo, useState, useEffect } from 'react';
import Header from '@/component/layout/Header/Header';
import { getQuestionDetail } from '@/network/protocol';
import qs from "querystring";


import './style.less';



const QuestionDetail = (props) => {

  const { location } = props;
  const [detail, setDetail] = useState({})

  const id = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.id
  }, [location.search])

  const getDate = useCallback(async () => {
    try {
      let data = await getQuestionDetail({ id })
      if (data.errorCode === 0) {
        let data1 = data.source;
        setDetail(data1)
      }
    } catch (error) {

    }
  }, [id])

  useEffect(() => {
    getDate()
  }, [getDate])


  return <>
    <Header center={<span>百问百答</span>} />
    <div className="global-content QuestionDetail-box">
      <div className="questiondetail-box">
        <p className="ques-title">
          Q: {detail.question}
        </p>
        <p className="ques-ans" dangerouslySetInnerHTML={{ __html: 'A: ' + (detail.answer || '') }}>
          {/* A: {detail.answer} */}
        </p>
      </div>

    </div>
  </>
}


export default QuestionDetail